Farewell Float: The future of CSS layout

The Dark Ages

Funny Gif about CSS

Pre CSS Era

pre css era

CSS Level 1

- Replacement styles of Font tags and BRs.
- Width, height
- padding, margins
- background, border, fonts, list-styles
- alignments & whitespace.

CSS Level 2

- CSS Table display `display: table;`.
- Lack of support in IE until version 8
- Layout hacks with absolute positioning and floats

CSS Level 3

- Became Modularized
- Processing power (Selectors and Media Queries)
- Decorative effects (multiple backgrounds, rounded corners, border images, and CSS gradients)
- Typography and Internationalization (vertical text, custom fonts, and line-breaking and justification controls)
- Layout (inline-block, flexbox, grid)

Float Main Purpose

float usage

CSS3 Layout: New Modules

CSS Multi-column Layout

Just like in newspapers. column-count: 3, column-width: 50px;, column-gap: 0, column-rule: thin solid black;

multi column layout

CSS Flexible Box Layout

You can use flexes absolutely, where the proportions you give are the proportions you get; or you can use them relatively, where leftover space is distributed after you've assigned sizes based on the content.

flexbox layout

Grid Template Layout

You can create grid systems and control the positioning of grid items purely through CSS, a clear separation of concerns from HTML

grid layout

CSS Grid vs. Flexbox

”They work together, they don’t compete with each other”

Flexbox Grid
No Page Layouts Page Layouts
UI elements UI elements
One-dimensional / x-axis OR y-axis Two-dimensional / x-axis AND y-axis
Content out Layout in
Responsive (Fexible and Fluid) [flex-basis, flex-wrap] Responsive (Fexible and Fluid) [minmax, fr]
Space distribution Space distribution
No Gaps (Gutters) Gaps (Gutters)
Support Logical Values Support Logical Values
Horizontal Alignment for content only Horizontal Alignment for all items and content
No Horizontal Alignment for individual items Horizontal Alignment for individual items
Vertical Alignments for all items and individual items Vertical Alignments for all items and individual items

CSS Box Alignment Specification

disaster

The new specification includes content distribution and self-alignment features that can be applied to block elements either in Flexbox or Grids.

Inline Axis is referred to as the Row Axis in the Grid specification and in Flexbox as the Main Axis. (justify-items and justify-self)

Block Axis is referred to as the Column Axis in the Grid specification and in Flexbox as the Cross Axis as it runs across the Main Axis. (align-self and align-items)

Flexbox Layout (Content out)

flexbox axis

Play with flexbox

Grid Layout (Layout in)

wesbos

Grid, lines, tracks, areas

Grid Line-based placement

Simple grid and flexbox with line-based placement

Grid Template Area

Simple Grid and flexbox example with area placement

Auto placement

Auto flow

Alignment

Grid Alignment Properties Visualisation

Responsive layout is now fun

 
container {
 display: grid;
 grid-template-columns: repeat(31fr);
 grid-template-rows: 100px 400px 100px 100px;
 grid-gap: 10px;
 
 grid-template-areas: 'header header header'
                      'sidebar article article'
                      'sidebar footer footer';
}
 
.header { grid-area: header }
.sidebar { grid-area: sidebar }
.article { grid-area: article }
.footer { grid-area: footer }

Responsive Layout

@media screen and (max-width: 768px) {
  .container {
    grid-template-areas: 'header header header'
                         'article article article'
                         'sidebar sidebar sidebar'
                         'footer footer footer';
  }
}

Responsive Layout

Can I use it?

happy girl

can I use grid can I use flexbox

Your New Friend (Feature Queries)

 
body {
  --bg-color: #98FB98;
  background-color: khaki;
}
 
@supports (background-color: var(--bg-color)) {
  body {
    background-color: var(--bg-color);
  }
}
 
@supports not(background-color: var(--bg-color)) {
  body {
    background-color: tomato;
  }
}

Safari support

Chrome support

Firefox support

Designers will relate

#container {
  /* 1: Set the width */
  width: 960px;
 
  /* Invoke the grid */
  display: grid;
 
  /* 2: Define the columns, in this case 12 columns with liquid width */
  grid-template-columns: repeat(121fr);
 
  /* Define 8 rows with 110px of height */
  grid-template-rows: repeat(8110px);
 
  /* 3: And the gap width 10px */
  grid-gap: 10px;
}
 
 
.box {
  /* Occupy the third to the eleventh column row */
  grid-column: 3/11;
 
  /* And occupy the region from 1 to 2 line */
  grid-row: 1/2;
}

Building Grid Layout with Sketch

Grid Garden Game Flexbox Froggy

gridbyexample flexbox from wesbos

Rachel Andrew Wesbos

Thank You

happy minions